<template>
  <div class="app-container">


    <el-table
      :header-cell-style="{ background: '#ffffff', color: '#000000' }"
      :key="tableKey"
      :row-class-name="tableRowClassName"
      v-loading="listLoading"
      :data="list"
      :row-key="'id'"
      :stripe=true
      ref="chargerTable"
      @selection-change="handleTableChange"
      border
      fit
      highlight-current-row
      style="
        width: 100%;
        font-size: 15px;
        box-shadow: 1px 1px 8px #cdcdcd;
        border: 0px;
      "
      :default-sort="{ prop: 'time', order: 'descending' }"
    >
      <el-table-column label="名称" min-width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.chargeName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="地址" min-width="220px">
        <template slot-scope="scope">
          <span>{{ scope.row.chargeAddress }}</span>
        </template>
      </el-table-column>

       <el-table-column label="设备ip" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.ip }}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备mac" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.mac }}</span>
        </template>
      </el-table-column>
       <el-table-column label="经度" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.longitude }}</span>
        </template>
      </el-table-column>

       <el-table-column label="纬度" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.latitude }}</span>
        </template>
      </el-table-column>

       <el-table-column label="价格状态" fixed="right" min-width="100px">
         <template slot-scope="scope">
              <el-tag v-if="scope.row.setResult !== 'success'" size="medium" type="info" effect="dark">未设置</el-tag>
              <el-tag v-else-if="scope.row.setResult == 'success'" size="medium" type="success" effect="dark">已设置</el-tag>
            </template>
      </el-table-column>

      <el-table-column label="使用详情" fixed="right" min-width="100px">
            <template slot-scope="scope">
              <el-button :disabled="userState" size="mini" type="primary" title="使用详情" @click="detail(scope.$index, scope.row)">使用详情</el-button>
            </template>
      </el-table-column>

       <el-table-column label="设置电价" fixed="right" min-width="100px">
            <template slot-scope="scope">
              <el-button :disabled="userState" size="mini" type="success" @click="getPrice(scope.$index, scope.row)" title="设置电价"><i class="el-icon-edit"></i></el-button>
            </template>
      </el-table-column>

    </el-table>

    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination
          layout="total,sizes,prev, pager,next,jumper"
          style="margin-top: 10px"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handlePageChange"
          @current-change="handleNoChange"
        ></el-pagination>
      </el-col>
    </el-row>




     <el-dialog title="详情" :visible.sync="detailDialog" :width="'520px'">
      <el-table ref="detailTable" v-loading="loading" :data="detailList" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight">
          <el-table-column prop="id" label="编号" width="150" sortable></el-table-column>
          <el-table-column prop="status" label="状态" width="150">
            <template slot-scope="scope">
              
              <el-tag v-if="scope.row.status == '255'" size="medium" type="warning" effect="dark">停用</el-tag>
              <el-tag v-else-if="scope.row.status >= 1 && scope.row.status <= 100" size="medium" type="info" effect="dark">使用中</el-tag>
              <el-tag v-else size="medium" type="success" effect="dark">空闲</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == 255" size="mini" type="danger" @click="plugSet(scope.$index, scope.row)">启用</el-button>
              <el-button v-else size="mini" type="success" @click="plugSet(scope.$index, scope.row)">停用</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-dialog>


    <el-dialog title="电价设置" :visible.sync="getPriceDialog" :width="'800px'">
      <el-form style="height: 300px;">


<el-row>
  <el-col :span="12">
        <el-form-item label="功率1:" :label-width="labelWidth" prop="occupiedFee">
          <el-input v-model="getPriceForm.power" auto-complete="off" disabled style="width:80px"></el-input> w~
           <el-input v-model="getPriceForm.firstPower" auto-complete="off" style="width:80px"></el-input> w
        </el-form-item>
  </el-col>
   <el-col :span="12">
        <el-form-item label="时间1:" :label-width="labelWidth" prop="occupiedFee">
         1元/
          <el-input v-model="getPriceForm.firstTime" auto-complete="off" style="width:80px"></el-input> 
         小时
        </el-form-item>
  </el-col>
</el-row>

<el-row>
  <el-col :span="12">
        <el-form-item label="功率2:" :label-width="labelWidth" prop="occupiedFee">
          <el-input v-model="getPriceForm.firstPower" auto-complete="off" disabled style="width:80px"></el-input> w~
           <el-input v-model="getPriceForm.secondPower" auto-complete="off" style="width:80px"></el-input> w
        </el-form-item>
  </el-col>
   <el-col :span="12">
        <el-form-item label="时间2:" :label-width="labelWidth" prop="occupiedFee">
         1元/
          <el-input v-model="getPriceForm.secondTime" auto-complete="off" style="width:80px"></el-input> 
         小时
        </el-form-item>
  </el-col>
</el-row>

<el-row>
  <el-col :span="12">
        <el-form-item label="功率3:" :label-width="labelWidth" prop="occupiedFee">
          <el-input v-model="getPriceForm.secondPower" auto-complete="off" disabled style="width:80px"></el-input> w~
           <el-input v-model="getPriceForm.thirdPower" auto-complete="off" style="width:80px"></el-input> w
        </el-form-item>
  </el-col>
   <el-col :span="12">
        <el-form-item label="时间3:" :label-width="labelWidth" prop="occupiedFee">
         1元/
          <el-input v-model="getPriceForm.thirdTime" auto-complete="off" style="width:80px"></el-input> 
         小时
        </el-form-item>
  </el-col>
</el-row>

<el-row>
  <el-col :span="12">
        <el-form-item label="功率4:" :label-width="labelWidth" prop="occupiedFee">
          <el-input v-model="getPriceForm.thirdPower" auto-complete="off" disabled style="width:80px"></el-input> w~
           <el-input v-model="getPriceForm.fourthPower" auto-complete="off" disabled style="width:80px"></el-input> w
        </el-form-item>
  </el-col>
   <el-col :span="12">
        <el-form-item label="时间4:" :label-width="labelWidth" prop="occupiedFee">
         1元/
          <el-input v-model="getPriceForm.fourthTime" auto-complete="off" style="width:80px"></el-input> 
         小时
        </el-form-item>
    </el-col>
 </el-row>
     
  </el-form>

        <div slot="footer" class="dialog-footer">
        <el-button @click="getPriceDialog = false">取 消</el-button>
        <el-button type="primary" @click="setPrice">确 定</el-button>
      </div>
    
</el-dialog>


  </div>
</template>

<style>

.page-tool {
  background:#fff5ee;
}

.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.el-table .warning-row {
  background: #fff5ee;
}
.el-table__body tr:hover > td {
  background-color: #fdc091;
}
.el-table__body tr.current-row > td {
  background-color: #fdc091;
}
</style>


<script>

import waves from "@/directive/waves"; // waves directive
import { loadChargersApi, addApi, batchDelApi, delEBChargerApi } from "@/api/bike";
import { getByMac,plugSet,getPriceApi,setPriceApi } from "@/api/bike2";
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getRoleId } from "@/utils/auth";
import { getNickName, getTestUserName } from "../../utils/auth";



export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    
  },
  queryParams: {
    name: "",
  },
  
  data() {
    return {

      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      addDialog: false,


      list: [],
      pageNo: 1,
      pageSize: 20,
      total: 0,
      listLoading: true,

      tableKey: 0,
      labelWidth: "120px",
      form: {},
      hours: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
      roleIndex: true,
      total: 0,
     
      getPriceForm:{
      mac:"",
      power:0,
      firstPower:"",
      firstTime:"",
      secondPower:"",
      secondTime:"",
      thirdPower:"",
      thirdTime:"",
      fourthPower:"",
      fourthTime:"",
      },
      chargerList: [],
      loading: false,
      pageNo: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      changeTypeDialog: false,
      addDialog: false,
      bindDialog: false,
      userDialog: false,
      labelWidth: "150px",
      selected: "",
      typeAstatus: {},
      dialogLable: "",
      dialogPlaceholder: "",
      parkfields: [],
      managers:[],
      areas: [],
      form: {},
      bindForm: {},
      locks: [],
      userForm: {},
      lunxun: {},
      editFeeDialog: false,
      getPriceDialog: false,
      roleIndex: true,
      detailDialog: false,
      detailList: [],
      selectMac: '',
  
      currentPage: 1,
      pageSizes: [10, 20, 40],
      pageSize: 20,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 41,
        name: undefined,
        phone: undefined,
        number: undefined,
        sort: "+id",
      },

     roleIndex:true
    };
  },

  created() {},

  mounted: function () {
    this.$nextTick(function () {
      this.loadChargers(this.pageNo, this.pageSize);
    });

  },

  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      }
      return "";
    },


  
    setPrice(data) {          
      var _this = this
        data = {
              power1:_this.getPriceForm.firstPower,
              power2:_this.getPriceForm.secondPower,
              power3:_this.getPriceForm.thirdPower,
              power4:_this.getPriceForm.fourthPower,
              chargeTime1:_this.getPriceForm.firstTime,
              chargeTime2:_this.getPriceForm.secondTime,
              chargeTime3:_this.getPriceForm.thirdTime,
              chargeTime4:_this.getPriceForm.fourthTime,
              mac:_this.getPriceForm.mac
            },

      setPriceApi(data).then(
            function (resp) {
              _this.remark='';
              if (resp.errmsg === "ok") {
                _this.$notify({
                  title: "成功",
                  message: "价格修改成功",
                  type: "success"
                });
                _this.editFeeDialog = false
              } else {
                _this.$notify({
                  title: "失败",
                  message: "价格修改失败，请稍后重试。",
                  type: "error"
                });
              }
              _this.getPriceForm.mac=''
              _this.getPriceDialog = false
            }
          );  
    },



    getPrice (index, row) {

      let _this = this
      _this.getPriceForm.mac = row.mac
   
      getPriceApi(row).then(resp => {
        // console.log(resp)
        // _this.getPriceForm = resp.data.loraPriceMsgRR;
        _this.getPriceForm.firstPower =  resp.data.loraPriceMsgRR.firstPower
        _this.getPriceForm.firstTime =  resp.data.loraPriceMsgRR.firstTime/60
        _this.getPriceForm.secondPower = resp.data.loraPriceMsgRR.secondPower
        _this.getPriceForm.secondTime = resp.data.loraPriceMsgRR.secondTime/60
        _this.getPriceForm.thirdPower = resp.data.loraPriceMsgRR.thirdPower
        _this.getPriceForm.thirdTime = resp.data.loraPriceMsgRR.thirdTime/60
        _this.getPriceForm.fourthPower = resp.data.loraPriceMsgRR.fourthPower
        _this.getPriceForm.fourthTime = resp.data.loraPriceMsgRR.fourthTime/60
    
        _this.loading = false;
        _this.getPriceDialog = true
      });
    },

 
    handleFilter() {
      this.listQuery.pageNo = 1;
   //   this.getList();
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success",
      });
      row.status = status;
    },

    //列表页码的触发事件
    handlePageChange(pageSize) {
      this.pageSize = pageSize;
      this.loadFeedback(this.pageNo, this.pageSize);
    },
    handleNoChange(pageNo) {
      this.pageNo = pageNo;
      this.loadFeedback(this.pageNo, this.pageSize);
    },
    handleTableChange(val) {
      this.multipleSelection = val;
    },
      loadChargers (pageNo, pageSize) {
      let _this = this;
      _this.loading = true;
      loadChargersApi({pageNo:_this.pageNo, pageSize:_this.pageSize,roleCode:this.$store.state.mainpart.key}).then((response) => {
        _this.list = response.data.dataList;
        _this.total = response.data.totalNum;
        setTimeout(() => {
          _this.listLoading = false;
        }, 1 * 1000);
      });
    },


    detail (index, row) {
      let _this = this;
      getByMac(row).then((resp) => {
          if (resp.errmsg === "ok") {
            _this.detailList = []
             for(var i=0;i<resp.data.plugStatus.length;i++){
               _this.detailList.push({
                id: i+1,
                status: resp.data.plugStatus[i],
                mac: resp.data.lcEbCharger.mac,
              })
             }
            _this.selectMac = row.mac
            _this.detailDialog = true
            setTimeout(() => {
             _this.loading = false;
            }, 1 * 1000);
          }
        });
    },

        plugSet (index, row) {
      let _this = this
      //1：发送停用，2：发送启用
      var workType
      // if(row.status>=1&&row.status<=100){
      //   workType=1
      // }
      if(row.status==255){
         workType=2
      }else{
        workType=1
      }
      if(workType==1){
        this.$confirm('确认停用', '提示', {
          type: 'warning'
        })
          .then(_ => {
            plugSet(_this.selectMac, row.id, workType).then(function (resp) {
              if (resp.errmsg === "ok") {
                _this.multipleSelection = []
                _this.$refs.detailTable.clearSelection();
                _this.detail(index, row);
                _this.$notify({
                  title: "成功",
                  message: "停用成功",
                  type: "success"
                });
              }else {
                _this.$notify({
                  title: "失败",
                  message: "停用失败",
                  type: "error"
                });
              }
            });
          })
      }else{
        this.$confirm('确认启用', '提示', {
          type: 'warning'
        })
          .then(_ => {
            plugSet(_this.selectMac, row.id, workType).then(function (resp) {
              if (resp.errmsg === "ok") {
                _this.multipleSelection = []
                _this.$refs.detailTable.clearSelection();
                _this.detail(index, row);
                _this.$notify({
                  title: "成功",
                  message: "启用成功",
                  type: "success"
                });
              }else {
                _this.$notify({
                  title: "失败",
                  message: "启用失败",
                  type: "error"
                });
              }
            });
          })
      }
    },
    


    
  }
}



</script>


